// procurement.js - 采购分析页面专用JavaScript功能

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initProcurementPage();
});

// 采购分析页面初始化函数
function initProcurementPage() {
    initProcurementFilters();
    initProcurementCharts();
    bindProcurementEvents();
}

// 采购筛选功能初始化
function initProcurementFilters() {
    console.log('初始化采购筛选功能');

    // 初始化结果描述
    updateProcurementResultDescription();

    // 绑定筛选条件变化事件
    const filterSelects = document.querySelectorAll('.procurement-filter-select, .procurement-year-select');
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            console.log('筛选条件发生变化:', this.id, this.value);
        });
    });
}

// 采购图表初始化
function initProcurementCharts() {
    console.log('初始化采购分析图表');

    // 初始化第一个图表 - 近三年采购情况统计
    initThreeYearProcurementChart();

    initChart2();
    initChart3();
    initChart4();
    initChart5();
    initChart6();
    initChart7();
    initChart8();
    initChart9();
    initChart10();
    initChart11();
    initChart12();

    // 初始化其他采购图表
    initOtherProcurementCharts();

    // 监听窗口大小变化
    window.addEventListener('resize', function() {
        resizeProcurementCharts();
    });
}

// 近三年采购情况统计图表
function initThreeYearProcurementChart() {
    const chartDom = document.querySelector(
        '#procurement .procurement-chart1, #procurement .procurement-chart2, #procurement .procurement-chart3, #procurement .procurement-chart4, #procurement .procurement-chart5, #procurement .procurement-chart6, #procurement .procurement-chart7, #procurement .procurement-chart8, #procurement .procurement-chart9, #procurement .procurement-chart10, #procurement .procurement-chart11, #procurement .procurement-chart12');

    if (!chartDom) {
        console.log('未找到采购分析页面的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initThreeYearProcurementChart(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getThreeYearProcurementOption();
        chartInstance.setOption(option);

        console.log('近三年采购情况统计图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化近三年采购图表失败:', error);
    }
}
// Chart2统计图表
function initChart2() {
    const chartDom = document.querySelector('#procurement .procurement-chart2');

    if (!chartDom) {
        console.log('未找到Chart2的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart2(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart2Option();
        chartInstance.setOption(option);

        console.log('Chart2图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart2图表失败:', error);
    }
}
function initChart3() {
    const chartDom = document.querySelector('#procurement .procurement-chart3');

    if (!chartDom) {
        console.log('未找到Chart3的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart3(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart3Option();
        chartInstance.setOption(option);

        console.log('Chart3图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart3图表失败:', error);
    }
}
function initChart4() {
    const chartDom = document.querySelector('#procurement .procurement-chart4');

    if (!chartDom) {
        console.log('未找到Chart4的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChar4(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart4Option();
        chartInstance.setOption(option);

        console.log('Chart4图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart4图表失败:', error);
    }
}
function initChart5() {
    const chartDom = document.querySelector('#procurement .procurement-chart5');

    if (!chartDom) {
        console.log('未找到Chart5的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart5(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart5Option();
        chartInstance.setOption(option);

        console.log('Chart5图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart5图表失败:', error);
    }
}
function initChart6() {
    const chartDom = document.querySelector('#procurement .procurement-chart6');

    if (!chartDom) {
        console.log('未找到Chart6的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart6(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart6Option();
        chartInstance.setOption(option);

        console.log('Chart6图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart6图表失败:', error);
    }
}
function initChart7() {
    const chartDom = document.querySelector('#procurement .procurement-chart7');

    if (!chartDom) {
        console.log('未找到Chart7的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart7(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart7Option();
        chartInstance.setOption(option);

        console.log('Chart7图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart7图表失败:', error);
    }
}
function initChart8() {
    const chartDom = document.querySelector('#procurement .procurement-chart8');

    if (!chartDom) {
        console.log('未找到Chart8的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart8(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart8Option();
        chartInstance.setOption(option);

        console.log('Chart8图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart8图表失败:', error);
    }
}
function initChart9() {
    const chartDom = document.querySelector('#procurement .procurement-chart9');

    if (!chartDom) {
        console.log('未找到Chart9的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart9(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart9Option();
        chartInstance.setOption(option);

        console.log('Chart9图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart9图表失败:', error);
    }
}
function initChart10() {
    const chartDom = document.querySelector('#procurement .procurement-chart10');

    if (!chartDom) {
        console.log('未找到Chart10的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart10(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart10Option();
        chartInstance.setOption(option);

        console.log('Chart10图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart10图表失败:', error);
    }
}
function initChart11() {
    const chartDom = document.querySelector('#procurement .procurement-chart11');

    if (!chartDom) {
        console.log('未找到Chart11的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart11(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart11Option();
        chartInstance.setOption(option);

        console.log('Chart11图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart11图表失败:', error);
    }
}
function initChart12() {
    const chartDom = document.querySelector('#procurement .procurement-chart12');

    if (!chartDom) {
        console.log('未找到Chart12的图表容器');
        return;
    }

    if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.log('图表容器尺寸为0，延迟初始化');
        setTimeout(() => initChart12(), 100);
        return;
    }

    try {
        let chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose(); // 清理旧实例
        }

        chartInstance = echarts.init(chartDom);
        const option = getChart12Option();
        chartInstance.setOption(option);

        console.log('Chart12图表初始化成功');

        // 确保图表正确渲染
        setTimeout(() => {
            chartInstance.resize();
        }, 50);

    } catch (error) {
        console.error('初始化Chart12图表失败:', error);
    }
}

// 图表1 - 获取近三年采购情况统计图表配置
function getThreeYearProcurementOption() {
    const colors = ['#9F79EE', '#98FB98'];
    let xAxisData00 = ['2023年', '2024年', '2025年'];
    let data11 = [22.2544, 23.5708, 16.4347];
    let data22 = [1.7412, 1.3896, 0.7371];
    let data33 = [559, 684.13, 462.46];
    let data44 = [1401.72, 1373.38, 819.56];

    var emphasisStyle = {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
        }
    };

    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            formatter: params => {
                let result = params[0].name + '<br/>';
                params.forEach(param => {
                    const value = param.seriesIndex <= 1 ?
                        param.value.toFixed(4) + ' 万项' :
                        param.value.toFixed(2) + ' 亿元';
                    result += `${param.marker} ${param.seriesName}: ${value}<br/>`;
                });
                return result;
            }
        },
        grid: {
            top: '20%',
            left: '2%',
            right: '2%',
            bottom: '5%',
            containLabel: true
        },
        legend: {
            data: ['生产项目', '基建项目', '生产金额', '基建金额'],
            textStyle: {
                color: '#4c9bfd',
            },
            top: 0,
            right: 20
        },
        xAxis: {
            type: "category",
            data: xAxisData00,
            axisLine: {
                onZero: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.2)"
                }
            },
            splitLine: { show: false },
            splitArea: { show: false },
            axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 12
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '项目（万项）',
                nameLocation: 'start',
                nameTextStyle: {
                    fontSize: 12,
                    color: colors[0],
                    fontWeight: 'bold',
                    align: 'left',
                    padding: [0, 0, 0, 10]  // 左内边距，让文字向右移
                },
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.1)",
                        width: 2
                    }
                },
                axisLabel: {
                    color: "rgba(255, 255, 255,0.6)",
                    formatter: '{value}',
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.1)",
                    }
                },
                nameGap: 18
            },
            {
                type: 'value',
                name: '金额（亿元）',
                nameLocation: 'start',
                nameTextStyle: {
                    fontSize: 12,
                    color: colors[1],
                    fontWeight: 'bold',
                    align: 'left',
                    padding: [0, 0, 0, 10]
                },
                position: 'right',
                alignTicks: true,
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.1)",
                        width: 2
                    }
                },
                axisLabel: {
                    color: "rgba(255, 255, 255,0.6)",
                    formatter: '{value}',
                    fontSize: 12
                },
                splitLine: {
                    show: false
                },
                nameGap: 18
            },
        ],
        series: [
            {
                name: '生产项目',
                color: '#cc99ff',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data11,
                itemStyle: {
                    barBorderRadius: 5,
                },
                label: {
                    show: false,
                    position: 'inside',
                    formatter: '{c}',
                    color: '#fff',
                    fontSize: 10
                }
            },
            {
                name: '基建项目',
                color: '#8470FF',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data22,
                itemStyle: {
                    barBorderRadius: 5,
                },
                label: {
                    show: false,
                    position: 'inside',
                    formatter: '{c}',
                    color: '#fff',
                    fontSize: 10
                }
            },
            {
                name: '生产金额',
                color: '#00cc66',
                type: 'bar',
                stack: 'two',
                emphasis: emphasisStyle,
                barWidth: "25%",
                yAxisIndex: 1,
                data: data33,
                itemStyle: {
                    barBorderRadius: 5,
                },
                label: {
                    show: false,
                    position: 'top',
                    formatter: '{c}',
                    color: '#fff',
                    fontSize: 10
                }
            },
            {
                name: '基建金额',
                color: '#009966',
                type: 'bar',
                stack: 'two',
                emphasis: emphasisStyle,
                yAxisIndex: 1,
                data: data44,
                itemStyle: {
                    barBorderRadius: 5,
                },
                label: {
                    show: false,
                    position: 'top',
                    formatter: '{c}',
                    color: '#fff',
                    fontSize: 10
                }
            }
        ]
    };
}

// 图表2 - 连续12个月采购数据
function getChart2Option() {
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            formatter: function(params) {
                // params 是一个数组，包含当前坐标点所有系列的数据

                // 1. 第一行显示坐标名称（月份）
                let result = params[0].name + '<br/>';

                // 2. 遍历所有数据系列
                params.forEach(param => {
                    // 根据系列索引决定显示格式
                    const value = param.seriesIndex < 1 ?
                        param.value.toFixed(0) + ' 项' :    // 第一个系列显示为"项"
                        param.value.toFixed(2) + ' 亿元';     // 第二个系列显示为"亿元"

                    // 3. 拼接每行内容：标记点 + 系列名 + 数值
                    result += `${param.marker} ${param.seriesName}: ${value}<br/>`;
                });
                return result;
            }
        },
        legend: {
            top: 0,
            right: 20,
            textStyle: {
                color: '#4c9bfd',
            },
        },
        grid: {
            top: '20%',
            left: '2%',
            right: '2%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['24年11月', '24年12月', '25年1月', '25年2月', '25年3月', '25年4月', '25年5月', '25年6月', '25年7月', '25年8月', '25年9月', '25年10月'],
            axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 2
                }
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '项目（项）',
                nameLocation: 'start',
                nameTextStyle: {
                    fontSize: 12,
                    color: "#0184d5",
                    fontWeight: 'bold'
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 2
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                nameGap: 21
            },
            {
                type: 'value',
                name: '金额（亿元）',
                nameLocation: 'start',
                alignTicks: true,
                nameTextStyle: {
                    fontSize: 12,
                    color: "#00d887",
                    fontWeight: 'bold'
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 2
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                nameGap: 21
            }
        ],
        series: [
            {
                name: '项目数',
                type: 'line',
                yAxisIndex: 0, // 指定使用第一个y轴
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)"
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                emphasis: {
                    focus: 'series'
                },
                data: [25946, 24291, 13242, 15882, 22686, 23578, 17517, 18284, 21847, 18054, 4458, 0], // 补全数据
                lineStyle: {
                    color: "#0184d5",
                    width: 2
                },
                symbol: "circle",
                symbolSize: 6,
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 8
                },
            },
            {
                name: '金额（亿元）',
                type: 'line',
                yAxisIndex: 1, // 指定使用第二个y轴
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(0, 216, 135, 0.4)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(0, 216, 135, 0.1)"
                            }
                        ],
                        false
                    ),
                },
                emphasis: {
                    focus: 'series'
                },
                data: [92.68, 134.12, 64.78, 41.90, 96.12, 104.45, 65.58, 120.81, 75.28, 74.44, 128.00, 0], // 补全数据
                lineStyle: {
                    color: "#00d887", // 改为绿色保持一致性
                    width: 2
                },
                symbol: "circle",
                symbolSize: 6,
                itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 8
                },
            }
        ]
    };
    return option;
}

// 图表3 - 框架协议连续12个月采购数据
function getChart12Option() {
    const colors = ["#c9ff00", "#ff00b5"];
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            formatter: function(params) {
                // params 是一个数组，包含当前坐标点所有系列的数据

                // 1. 第一行显示坐标名称（月份）
                let result = params[0].name + '<br/>';

                // 2. 遍历所有数据系列
                params.forEach(param => {
                    // 根据系列索引决定显示格式
                    const value = param.seriesIndex < 1 ?
                        param.value.toFixed(0) + ' 项' :    // 第一个系列显示为"项"
                        param.value.toFixed(2) + ' 亿元';     // 第二个系列显示为"亿元"

                    // 3. 拼接每行内容：标记点 + 系列名 + 数值
                    result += `${param.marker} ${param.seriesName}: ${value}<br/>`;
                });
                return result;
            }
        },
        legend: {
            top: 0,
            right: 20,
            textStyle: {
                color: '#4c9bfd',
            },
        },
        grid: {
            top: '20%',
            left: '2%',
            right: '2%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['24年11月', '24年12月', '25年1月', '25年2月', '25年3月', '25年4月', '25年5月', '25年6月', '25年7月', '25年8月', '25年9月', '25年10月'],
            axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 2
                }
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '项目（项）',
                nameLocation: 'start',
                nameTextStyle: {
                    fontSize: 12,
                    color: colors[0],
                    fontWeight: 'bold'
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 2
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                nameGap: 21
            },
            {
                type: 'value',
                name: '金额（亿元）',
                nameLocation: 'start',
                alignTicks: true,
                nameTextStyle: {
                    fontSize: 12,
                    color: colors[1],
                    fontWeight: 'bold'
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 2
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                nameGap: 21
            }
        ],
        series: [
            {
                name: '项目数',
                type: 'line',
                yAxisIndex: 0, // 指定使用第一个y轴
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)"
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                emphasis: {
                    focus: 'series'
                },
                data: [699, 1018, 511, 552, 673, 649, 624, 600, 572, 564, 715, 198], // 补全数据
                lineStyle: {
                    color: colors[0],
                    width: 2
                },
                symbol: "circle",
                symbolSize: 6,
                itemStyle: {
                    color: colors[0],
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 8
                },
            },
            {
                name: '金额（亿元）',
                type: 'line',
                yAxisIndex: 1, // 指定使用第二个y轴
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(0, 216, 135, 0.4)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(0, 216, 135, 0.1)"
                            }
                        ],
                        false
                    ),
                },
                emphasis: {
                    focus: 'series'
                },
                data: [2.16, 4.12, 1.87, 1.65, 2.08, 1.88, 1.88, 2.07, 1.76, 1.90, 2.31, 0.64], // 补全数据
                lineStyle: {
                    color: colors[1], // 改为绿色保持一致性
                    width: 2
                },
                symbol: "circle",
                symbolSize: 6,
                itemStyle: {
                    color: colors[1],
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 8
                },
            }
        ]
    };
    return option;
}

// 图表3 - 2025年采购方式
function getChart3Option() {
    return {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}亿元 ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            textStyle: {
                color: '#4c9bfd',
                fontSize: 11
            }
        },
        series: [{
            name: '采购方式',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderColor: '#0f1c3c',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}\n{c}亿元',
                color: 'rgba(255, 255, 255, 0.8)',
                fontSize: 10
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 12,
                    fontWeight: 'bold'
                }
            },
            data: [
                { value: 45.2, name: '公开招标', itemStyle: { color: '#1089E7' } },
                { value: 28.7, name: '邀请招标', itemStyle: { color: '#F57474' } },
                { value: 15.3, name: '寻比采购', itemStyle: { color: '#56D0E3' } },
                { value: 8.9, name: '谈判采购', itemStyle: { color: '#F8B448' } },
                { value: 5.1, name: '其他方式', itemStyle: { color: '#8B78F6' } }
            ]
        }]
    };
}

// 图表4 - 2025年采购项目
function getChart4Option() {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['设备采购', '工程服务', '物资采购', '技术服务', '运维服务', '其他采购'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        series: [{
            name: '采购金额',
            type: 'bar',
            data: [42.5, 38.2, 28.7, 22.1, 18.9, 12.3],
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 1, y2: 0,
                    colorStops: [
                        { offset: 0, color: '#1089E7' },
                        { offset: 1, color: '#4fc3f7' }
                    ]
                },
                barBorderRadius: [0, 5, 5, 0]
            },
            label: {
                show: true,
                position: 'right',
                color: '#fff',
                fontSize: 10,
                formatter: '{c}亿元'
            }
        }]
    };
}

// 图表5 - 招标采购率
function getChart5Option() {
    return {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}%'
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        yAxis: {
            type: 'value',
            name: '招标率(%)',
            max: 100,
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '招标采购率',
            type: 'line',
            data: [78, 82, 85, 83, 87, 89, 86, 88, 91, 90, 92, 94],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                width: 3,
                color: '#4fc3f7'
            },
            itemStyle: {
                color: '#4fc3f7'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(79, 195, 247, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(79, 195, 247, 0.1)'
                    }]
                }
            }
        }]
    };
}

// 图表6 - 公开招标率
function getChart6Option() {
    return {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}%'
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        yAxis: {
            type: 'value',
            name: '公开招标率(%)',
            max: 100,
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '公开招标率',
            type: 'line',
            data: [65, 68, 72, 70, 75, 78, 76, 79, 82, 81, 84, 86],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                width: 3,
                color: '#F57474'
            },
            itemStyle: {
                color: '#F57474'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(245, 116, 116, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(245, 116, 116, 0.1)'
                    }]
                }
            }
        }]
    };
}

// 图表7 - 采购节资率
function getChart7Option() {
    return {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}%'
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        yAxis: {
            type: 'value',
            name: '节资率(%)',
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '采购节资率',
            type: 'line',
            data: [12.5, 13.8, 14.2, 13.5, 15.1, 16.3, 15.8, 16.5, 17.2, 16.8, 18.1, 18.5],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                width: 3,
                color: '#56D0E3'
            },
            itemStyle: {
                color: '#56D0E3'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(86, 208, 227, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(86, 208, 227, 0.1)'
                    }]
                }
            }
        }]
    };
}

// 图表8 - 全流程线上采购率
function getChart8Option() {
    return {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}%'
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        yAxis: {
            type: 'value',
            name: '线上采购率(%)',
            max: 100,
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '线上采购率',
            type: 'line',
            data: [68, 72, 75, 78, 82, 85, 83, 87, 89, 88, 91, 93],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                width: 3,
                color: '#F8B448'
            },
            itemStyle: {
                color: '#F8B448'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(248, 180, 72, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(248, 180, 72, 0.1)'
                    }]
                }
            }
        }]
    };
}

// 图表9 - 一级集采近一年数据
function getChart9Option() {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        yAxis: {
            type: 'value',
            name: '金额(亿元)',
            nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 12
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '一级集采',
            type: 'bar',
            data: [8.5, 9.2, 10.8, 11.3, 12.1, 13.2, 12.8, 14.1, 15.3, 16.2, 17.5, 18.8],
            itemStyle: {
                color: '#1089E7',
                barBorderRadius: [5, 5, 0, 0]
            },
            label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 10,
                formatter: '{c}亿'
            }
        }]
    };
}

// 图表10 - 二级集采近一年数据
function getChart10Option() {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        yAxis: {
            type: 'value',
            name: '金额(亿元)',
            nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 12
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '二级集采',
            type: 'bar',
            data: [4.2, 4.8, 5.3, 5.7, 6.2, 6.8, 6.5, 7.1, 7.8, 8.2, 8.7, 9.3],
            itemStyle: {
                color: '#F57474',
                barBorderRadius: [5, 5, 0, 0]
            },
            label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 10,
                formatter: '{c}亿'
            }
        }]
    };
}

// 图表11 - 华能商城连续12个月采购数据
function getChart11Option() {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 11
            }
        },
        yAxis: {
            type: 'value',
            name: '金额(万元)',
            nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 12
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '华能商城',
            type: 'line',
            data: [1250, 1380, 1520, 1680, 1850, 2020, 1950, 2180, 2350, 2480, 2620, 2850],
            smooth: true,
            itemStyle: {
                color: '#56D0E3'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(86, 208, 227, 0.3)'
                    }, {
                        offset: 1, color: 'rgba(86, 208, 227, 0.1)'
                    }]
                }
            },
            symbol: 'circle',
            symbolSize: 6
        }]
    };
}


// 初始化其他采购图表（占位函数）
function initOtherProcurementCharts() {
    // 这里可以初始化采购分析页面的其他11个图表
    const chartContainers = document.querySelectorAll('#procurement .procurement-chart-placeholder');
    chartContainers.forEach((container, index) => {
        if (index > 0) { // 跳过第一个图表，因为已经单独初始化了
            // 初始化其他图表的逻辑
            console.log(`初始化采购图表 ${index + 1}`);
        }
    });
}

// 图表尺寸调整
function resizeProcurementCharts() {
    const charts = document.querySelectorAll('#procurement .chart, #procurement .procurement-chart1, #procurement .procurement-chart2, #procurement .procurement-chart3, #procurement .procurement-chart4, #procurement .procurement-chart5, #procurement .procurement-chart6, #procurement .procurement-chart7, #procurement .procurement-chart8, #procurement .procurement-chart9, #procurement .procurement-chart10, #procurement .procurement-chart11, #procurement .procurement-chart12');
    charts.forEach(chartDom => {
        const chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            setTimeout(() => {
                chartInstance.resize();
            }, 50);
        }
    });
}

// 绑定采购页面事件
function bindProcurementEvents() {
    // 查询按钮事件
    const queryButton = document.getElementById('procurement-query-data');
    if (queryButton) {
        queryButton.addEventListener('click', queryProcurementData);
        console.log('采购查询按钮事件绑定成功');
    }

    // 表格标签切换事件
    document.querySelectorAll('.procurement-tab-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            switchProcurementTableTab(this);
        });
    });

    // 筛选条件变化事件
    const filterElements = document.querySelectorAll('#procurement select, #procurement input');
    filterElements.forEach(element => {
        element.addEventListener('change', function() {
            updateProcurementResultDescription();
        });
    });
}

// 查询采购数据
function queryProcurementData() {
    console.log('执行采购数据查询');

    updateProcurementResultDescription();

    // 模拟更新概览数据
    const overviewValues = document.querySelectorAll('.procurement-overview-value');
    if (overviewValues.length === 4) {
        overviewValues[0].innerHTML = '1,248<span class="procurement-overview-unit">项</span>';
        overviewValues[1].innerHTML = '8,542.6<span class="procurement-overview-unit">万元</span>';
        overviewValues[2].innerHTML = '9,832.1<span class="procurement-overview-unit">万元</span>';
        overviewValues[3].innerHTML = '13.1<span class="procurement-overview-unit">%</span>';
    }

    // 模拟数据加载效果
    showProcurementLoading();

    // 模拟异步数据加载
    setTimeout(() => {
        hideProcurementLoading();
        console.log('采购数据查询完成');
    }, 1000);
}

// 切换采购表格标签
function switchProcurementTableTab(clickedBtn) {
    // 移除所有active类
    document.querySelectorAll('.procurement-tab-btn').forEach(b => b.classList.remove('active'));
    // 添加active类到当前按钮
    clickedBtn.classList.add('active');

    const tabType = clickedBtn.getAttribute('data-tab');

    // 切换表格显示
    if (tabType === 'bid') {
        document.querySelector('.procurement-bid-table').classList.add('active');
        document.querySelector('.procurement-non-bid-table').classList.remove('active');
    } else if (tabType === 'non-bid') {
        document.querySelector('.procurement-bid-table').classList.remove('active');
        document.querySelector('.procurement-non-bid-table').classList.add('active');
    }

    console.log(`切换到 ${tabType} 采购数据`);
}

// 更新结果描述
function updateProcurementResultDescription() {
    const level = document.getElementById('procurement-level')?.value || '全部级别';
    const type = document.getElementById('procurement-type')?.value || '全部类型';
    const enterprise = document.getElementById('enterprise-type')?.value || '全部类型';
    const platform = document.getElementById('procurement-platform')?.value || '全部平台';
    const method = document.getElementById('procurement-method')?.value || '全部方式';
    const year = document.getElementById('year-select')?.value || '2025';

    const description = `截止到${getCurrentDate()}，<span class="procurement-highlight">${level}</span>、<span class="procurement-highlight">${type}</span>、<span class="procurement-highlight">${enterprise}</span>、<span class="procurement-highlight">${platform}</span>、<span class="procurement-highlight">${method}</span>的${year}年采购数据如上`;

    const resultDesc = document.getElementById('procurement-result-description');
    if (resultDesc) {
        resultDesc.innerHTML = description;
    }
}

// 获取当前日期
function getCurrentDate() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// 显示加载状态
function showProcurementLoading() {
    const queryBtn = document.getElementById('procurement-query-data');
    if (queryBtn) {
        queryBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 查询中...';
        queryBtn.disabled = true;
    }
}

// 隐藏加载状态
function hideProcurementLoading() {
    const queryBtn = document.getElementById('procurement-query-data');
    if (queryBtn) {
        queryBtn.innerHTML = '<i class="fas fa-search"></i> 查询采购数据';
        queryBtn.disabled = false;
    }
}

// 导出页面切换时需要调用的函数
function initProcurementChartsOnShow() {
    // 延迟初始化以确保DOM完全渲染
    setTimeout(() => {
        initThreeYearProcurementChart();

        initChart2();
        initChart3();
        initChart4();
        initChart5();
        initChart6();
        initChart7();
        initChart8();
        initChart9();
        initChart10();
        initChart11();
        initChart12();

        resizeProcurementCharts();
    }, 150);
}

// 清理采购页面资源
function cleanupProcurementPage() {
    const charts = document.querySelectorAll('#procurement .chart, #procurement .procurement-chart1, #procurement .procurement-chart2, #procurement .procurement-chart3, #procurement .procurement-chart4, #procurement .procurement-chart5, #procurement .procurement-chart6, #procurement .procurement-chart7, #procurement .procurement-chart8, #procurement .procurement-chart9, #procurement .procurement-chart10, #procurement .procurement-chart11, #procurement .procurement-chart12');
    charts.forEach(chartDom => {
        const chartInstance = echarts.getInstanceByDom(chartDom);
        if (chartInstance) {
            chartInstance.dispose();
        }
    });
    console.log('采购页面资源清理完成');
}